<template>
    <div class="cx_left">
        <vue-draggable @start="onStart" @end="onEnd" v-model="TemList" :animation="150" :group="{
            name: 'TemList',
            pull: 'clone',
            put: false,
        }" :sort='false' class="w-cp-items">

            <span class="item" v-for="(item, index) in TemList" :key="index">{{ item.label }}</span>
        </vue-draggable>
    </div>
</template>

<script setup name="addEdit">
import { VueDraggable } from 'vue-draggable-plus'
import { debounce, deepClone } from "@/utils/index";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["refresh"]);
const data = reactive({
    TemList: [
        {
            "label": "单行输入框",
            "el": "input",
            "prop": "name",
            "place": "单行输入框",
            "max": 15,
            "required": true
        },

        {
            "label": "多行输入框",
            "el": "text-area",
            "prop": "nametext",
            "place": "多行输入框",
        },

        {
            "label": "单选择器",
            "el": "select",
            "prop": "select",
            "props": {
                "label": "label",
                "value": "value"
            },
            "options": [
                {
                    "label": "自由完成",
                    "value": '自由完成'
                },
                {
                    "label": "按日递进",
                    "value": "按日递进",
                },
                {
                    "label": "按日开放",
                    "value": "按日开放",
                },

            ]
        },


        {
            "label": "多选择器",
            "el": "selects",
            "multiple": true,
            "collapseTags": true,
            "prop": "selects",
            "props": {
                "label": "label",
                "value": "value"
            },
            "options": [
                {
                    "label": "自由完成",
                    "value": "自由完成",
                },
                {
                    "label": "按日递进",
                    "value": "按日递进",
                },
                {
                    "label": "按日开放",
                    "value": "按日开放"
                },

            ]
        },

        {
            "label": "单选框",
            "el": "radio",
            "prop": "radioId",
            "place": "单选框",
            "options": [
                {
                    "label": "自由完成",
                    "value": "自由完成",
                },
                {
                    "label": "按日递进",
                    "value": "按日递进",
                },
            ]
        },

        {
            "label": "复选框",
            "el": "checkbox",
            "prop": "checkboxId",
            "place": "复选框",
            "options": [
                {
                    "label": "自由完成",
                    "value": "自由完成",
                },
                {
                    "label": "按日递进",
                    "value": "按日递进",
                },
            ]
        },


        {
            "label": "数字输入框",
            "el": "input-number",
            "prop": "numbers",
            "place": "",
        },

        {
            "label": "单选日期",
            "el": "date",
            "prop": "date",
            "place": "单选日期",
        },

        {
            "label": "单选时间",
            "el": "time",
            "prop": "dateTime",
            "place": "单选时间",
        },

        {
            "label": "日期范围",
            "el": 'date-range',
            "prop": "dateRange",
            "place": "日期范围",
        },

        {
            "label": "日期时间",
            "el": "time-range",
            "prop": "timeRange",
            "place": "日期时间",
        },

    ],
    open: true,
    drag: false,
    form: {},
    rules: {
        staffNo: [
            {
                required: true,
                message: "请输入工号",
                trigger: "change",
            },
            {
                min: 2,
                max: 256,
                message: "长度在 2 到 21 个字符",
                trigger: "blur",
            },
        ],
    },
});
const { open, drag, form, TemList } = toRefs(data);
const onStart = () => {
    drag.value = true;
};
const onEnd = () => {
    drag.value = false;
}



</script>

<style lang="scss" scoped>
.cx_left {
    background: #fff;
    padding: 10px;
    width: 30%;

}

.box_item {
    width: 30%;
    display: flex;
    flex-wrap: wrap;
}

.w-cp-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.item {
    flex-shrink: 0;
    width: calc(50% - 20px);
    text-align: center;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #F0F0F0;
}
</style>